import React, { memo, Suspense } from 'react'
import {renderRoutes} from 'react-router-config'


import routes from './router'
import store from './store'
import {Provider} from 'react-redux'

import ZHAppHeader from './components/app-header'
import ZHAppFooter from './components/app-footer'
import ZHAppPlayerBar from './pages/player/app-player-bar'
import { HashRouter } from 'react-router-dom'

export default memo(function App() {
  return (
    <Provider store={store}>
      <HashRouter>
        <ZHAppHeader/>
          <Suspense fallback={<div>page loading</div>}>
          {renderRoutes(routes)}
          </Suspense>
        <ZHAppFooter/>
        <ZHAppPlayerBar/>
      </HashRouter>
    </Provider>

  )
})
